<template>
  <div class="process-design" :style="'display: flex; height:' + height">
    <!-- 设计面板 -->
    <bpmn-process-designer
      ref="processDesigner"
      v-model="xmlString"
      v-bind="controlForm"
      keyboard
      :events="[ 'element.click', 'connection.added', 'connection.removed', 'connection.changed' ]"
      @element-click="elementClick"
      @init-finished="initModeler"
      @event="handlerEvent"
      @save="onSaveProcess"
    />

    <!-- 右侧属性面板 -->
    <bmpn-process-penal :bpmn-modeler="modeler" :prefix="controlForm.prefix" class="process-panel" />
  </div>
</template>

<script>
import './package/theme/index.scss'
import BpmnProcessDesigner from './package/designer/ProcessDesigner'
import BmpnProcessPenal from './package/penal/PropertiesPanel'
// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
import CustomContentPadProvider from './package/designer/plugins/content-pad'
// 自定义左侧菜单（修改 默认任务 为 用户任务）
import CustomPaletteProvider from './package/designer/plugins/palette'
import axios from 'axios'

export default {
  name: 'ProcessDesigner',
  componentName: 'ProcessDesigner',
  components: { BpmnProcessDesigner, BmpnProcessPenal },
  data() {
    return {
      height: document.documentElement.clientHeight - 94.5 + 'px;',
      xmlString: null,
      modeler: null,
      controlForm: {
        processId: 'Process_1',
        processName: '流程-1',
        namespace: '命名空间-1',
        simulation: false,
        labelEditing: false,
        labelVisible: false,
        prefix: 'flowable',
        headerButtonSize: 'small',
        additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
      }
    }
  },
  methods: {
    /**
     * bpmn初始化完成
     */
    initModeler(modeler) {
      setTimeout(() => {
        this.modeler = modeler
      }, 10)
    },
    /**
     * 选择元素
     */
    elementClick(element) {
      this.element = element
    },
    /**
     * 事件
     */
    handlerEvent(eventName, element) {

    },
    /**
     * 保存
     */
    // onSaveProcess(saveData) {
    onSaveProcess(bpmnXml) {
      // this.$emit('save', saveData)

      this.bpmnXml = bpmnXml;
      let dataBody = {
        // modelId: this.designerData.modelId,
        modelId: '1fca0517-bc2c-11ee-9d1c-a25950e397ed',
        bpmnXml: this.bpmnXml
      }
      this.$confirm("是否将此模型保存为新版本？", "提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: '是',
        cancelButtonText: '否'
      }).then(() => {
        this.confirmSave(dataBody, true)
      }).catch(action => {
        if (action === 'cancel') {
          this.confirmSave(dataBody, false)
        }
      })
    },
    confirmSave(body, newVersion) {
      // this.designerData.loading = true;



      axios({
        url: process.env.VUE_APP_BASE_API + '/workflow/model/save',
        method: 'post',
        data: Object.assign(body, { newVersion: newVersion })
      }).then(() => {
        // this.designerOpen = false;
        // this.getList();
      }).finally(() => {
        // this.designerData.loading = false;
      })

      // saveModel(Object.assign(body, {
      //   newVersion: newVersion
      // })).then(() => {
      //   this.designerOpen = false;
      //   this.getList();
      // }).finally(() => {
      //   this.designerData.loading = false;
      // })
    },
  }
}
</script>

<style lang="scss">
  body * {
    /* 滚动条 */
    &::-webkit-scrollbar-track-piece {
      background-color: #fff; /*滚动条的背景颜色*/
      -webkit-border-radius: 0; /*滚动条的圆角宽度*/
    }

    &::-webkit-scrollbar {
      width: 10px; /*滚动条的宽度*/
      height: 8px; /*滚动条的高度*/
    }

    &::-webkit-scrollbar-thumb:vertical {
      /*垂直滚动条的样式*/
      height: 50px;
      background-color: rgba(153, 153, 153, 0.5);
      -webkit-border-radius: 4px;
      outline: 2px solid #fff;
      outline-offset: -2px;
      border: 2px solid #fff;
    }

    &::-webkit-scrollbar-thumb {
      /*滚动条的hover样式*/
      background-color: rgba(159, 159, 159, 0.3);
      -webkit-border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb:hover {
      /*滚动条的hover样式*/
      background-color: rgba(159, 159, 159, 0.5);
      -webkit-border-radius: 4px;
    }
  }
</style>
